import React from 'react';

import {
    Flex,
    FlexItem,
    InfiniteLoader
} from 'react-weui';

import Header from '../components/header'
import Footer from '../components/footer'

import '../assets/listItem.css'

import goodsImg from '../images/goods.jpg'

import { goodsList } from '../modules/goods'

var ListItemClass = React.createClass({
    getInitialState: function () {
        return {
            show_title: this.props.dataList.show_title,
            characteristic : this.props.dataList.characteristic,
            now_price : this.props.dataList.now_price,
            out_price : this.props.dataList.out_price,
            buy_num : this.props.dataList.buy_num,
            imgUrl : this.props.dataList.img.imgUrl,
            id : this.props.dataList.id
        };
    },

    _addCart : function (event) {
        let newNum = this.state.buy_num + 1;
        this.setState({buy_num : newNum});
    },
    _reduceCart : function (event) {
        let newNum = this.state.buy_num - 1;
        this.setState({buy_num : newNum <= 0 ? 0 : newNum});
    },

    render : function () {
        let className = "fruit-lits-item";
        if (this.props.isReight) {
            className += " ml5";
        }

        return (
            <div className="mb5">
                <div className={className}>
                    <div className="list-item-img">
                        <img src={ this.state.imgUrl } alt=""/>
                    </div>
                    <div className="fruit-info">
                        <div className="fruit-title">{ this.state.show_title }</div>
                        <div className="fruit-tag">{ this.state.characteristic }</div>
                        <div className="buy-item">
                            <div className="fruit-price">
                                <div className="now">{ this.state.now_price }</div>
                                <div className="out">{ this.state.out_price }</div>
                            </div>
                            <div className="cart-item cart-not-zero cart-not-zero-1" style={{display: this.state.buy_num == 0 ? 'none' : 'flex'}}>
                                <div className="cart-item-icon cart-item-jian reduceCart" onClick={ this._reduceCart }>
                                    <i className="iconfont icon-jianhao"></i>
                                </div>
                                <div className="cart-item-num buy-num-1">{ this.state.buy_num }</div>
                                <div className="cart-item-icon cart-item-jia addCart" onClick={ this._addCart }>
                                    <i className="iconfont icon-jiahao1"></i>
                                </div>
                            </div>
                            <div className="cart-item cart-item-buttom cart-zero cart-zero-1" style={{display: this.state.buy_num == 0 ? 'flex' : 'none'}}>
                                <div className="cart-item-icon addCart show-cart-item" onClick={ this._addCart }>
                                    <i className="iconfont icon-gouwuche"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});

export default class Index extends React.Component{

    constructor (state) {
        super(state);
        this.state = {
            data: [],
            page: 1, // 从第一页开始加载

            loadingComplete: false, // 加载完成
            loading:false, // 加载中
            initLoadingError: false, // 首次加载失败
            refreshing: false,  // 下拉刷新

            height : 0
        };

    };
    // 进来页面，进行数据加载
    componentDidMount () {

        // 需要去掉fixed header & footer
        let height = 0;
        let header = document.querySelector(".header");
        if (header != null) {
            let headerHeight = header.getBoundingClientRect().height;
            height += headerHeight - 35;
        }

        let footer = document.querySelector(".weui-tabbar");
        if (footer != null) {
            let footerHeight = footer.getBoundingClientRect().height;
            height += footerHeight;
        }

        let listHeight = window.innerHeight - height;

        this.setState({height: listHeight });


        this.reload();
    };
    reload() {

        var __this = this;

        this.setState({
            page: 1, // 从第一页开始
            data: [], // 清空已有数据
            loadingComplete: false,
            initLoadingError: false,
            loading: true,
            refreshing: false,
        });
        goodsList(function (rdata) {
            __this.setState({ data : rdata.data.list});
        });
    };
    _loadMore(resolve, finish) {
        var __this = this;

        goodsList(function (rdata) {
            const data = __this.state.data.concat(rdata.data.list);
            __this.setState({ data });
            resolve();
        });
    };
    render () {
        return (
            <div>
                <Header/>
                <InfiniteLoader
                    height={this.state.height + 'px'}
                    onLoadMore={ (resolve, finish) => {
                        this._loadMore(resolve, finish);
                    }}
                >
                    <Flex className="weui-flex weui-flex__pd fxwrap">
                        {
                            this.state.data.map(function (list, i) {
                                if((i+1) % 2 === 0) {
                                    return <ListItemClass isReight dataList={list}/>
                                }else{
                                    return <ListItemClass dataList={list}/>
                                }
                            })
                        }

                    </Flex>
                </InfiniteLoader>
                <Footer/>
            </div>
        )
    }
}